import {View, Text, FlatList, Image, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {base, productList} from '../service';
import LoadMore from '../components/LoadMore';

// 列表页经典公式:5个变量 + 1个方法 + 3处调用

export default function ProductList({navigation, route}) {
  // -----------------------------------------------------------------

  // 状态变量1 => 商品查询关键字
  let [kw, setKw] = useState('');

  // 状态变量2 => 查询到所有商品
  let [products, setProducts] = useState([]);

  // 状态变量3 => 当前加载的页号
  let [pageNum, setPageNum] = useState(0);

  // 状态变量4 => 符号条件商品总页数
  let [pageCount, setPageCount] = useState(9999);

  // 状态变量5 => 当前师傅正在加载
  let [isLoading, setIsLoading] = useState(false);

  // -----------------------------------------------------------------

  // 一个方法:加载下一页数据
  let loadNextPageDate = async () => {
    // 1.如果当前正在加载,或者当前已经没有更多数据了,则退出
    if (isLoading || pageNum >= pageCount) {
      return;
    }
    // 2.修改当前是否正在加载中 为真
    setIsLoading(true);
    // 3.访问服务器端数据接口,获取商品数据,把新数据拼接在旧数据尾部
    let body = await productList(pageNum + 1, 10);
    // console.log(data);
    setPageNum(body.pno); //保存当前页面号
    setPageCount(body.pageCount); //保存总也数
    setProducts([...products, ...body.data]); //保存此次查询到的数据
    // 4.修改 当前师傅正在加载中 为假
    setIsLoading(false);
  };

  // -----------------------------------------------------------------

  // 调用情形1:组件挂载时,加载下一页数据(即第一页)
  useEffect(() => {
    loadNextPageDate();
  }, []);

  // 调用情形3:页面顶部下拉刷新时,清掉已有数据,重新加载第1页

  // 渲染一个列表项
  let _renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => navigation.navigate('detail', {pid: item.lid})}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 10,
        }}>
        {/* 左侧的图片 */}
        <Image
          style={{width: 90, height: 90}}
          source={{uri: base + '../' + item.pic}}></Image>
        {/* 右侧的详细描述 */}
        <View style={{flex: 1}}>
          {/* numberOfLines:一段文本显示几行?溢出部分用省略号代替 */}
          <Text numberOfLines={2} style={{fontSize: 15}}>
            {item.title}
          </Text>
          <View style={{flexDirection: 'row', marginTop: 5}}>
            <Text
              style={{
                fontSize: 16,
                fontWeight: 'bold',
                color: '#ed0a0a',
                flex: 1,
              }}>
              ${item.price}
            </Text>
            <Text
              style={{
                paddingHorizontal: 8,
                paddingVertical: 1,
                color: '#fff',
                borderRadius: 4,
                backgroundColor: '#0aaa0a',
                marginHorizontal: 5,
              }}>
              修改
            </Text>
            <Text
              style={{
                paddingHorizontal: 8,
                paddingVertical: 1,
                color: '#fff',
                borderRadius: 4,
                backgroundColor: '#dd0a0a',
                marginHorizontal: 5,
              }}>
              删除
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  // -----------------------------------------------------------------

  let _ItemSeparatorComponent = () => {
    return (
      // <Text>
      //   _____________________________________________________________________
      // </Text>
      <View
        style={{height: 1, backgroundColor: '#aaa', marginVertical: 5}}></View>
    );
  };

  // -----------------------------------------------------------------

  let _ListHeaderComponent = () => {
    return (
      <Text
        style={{
          fontSize: 30,
          textAlign: 'center',
          color: '#0aa1ed',
          fontWeight: 'bold',
          marginTop: 14,
        }}>
        商品库存列表
      </Text>
    );
  };

  // -----------------------------------------------------------------

  let _ListFooterComponent = () => {
    return (
      <LoadMore
        status={
          isLoading ? 'loading' : pageNum < pageCount ? 'more' : 'noMore'
        }></LoadMore>
    );
  };

  // -----------------------------------------------------------------

  // 处理 滚动到页面底部 事件
  let _onEndReached = () => {
    console.log('滚动到底了..............');
    // 调用情形2:滚动到页面底部时,加载下一页数据(触底加载更多)
    loadNextPageDate();
  };

  // -----------------------------------------------------------------

  // 处理下拉刷新事件
  let _onRefresh = () => {
    console.log('===================下拉刷新了==========================');
    // 1.清楚已经加载的数据痕迹
    pageNum = 0; // 直接习惯状态变量可以立即生效,但不会影响渲染系统,即不会重新绘制
    products = []; //注意:此处是特意在直接修改状态变量,而没有使用setXxx()异步方法
    // 2.加载下一页数据(即第一页)
    loadNextPageDate();
  };

  // -----------------------------------------------------------------

  return (
    <View>
      {/* data:需要渲染出来的所有数据 => 数组 */}
      {/* renderItem:如何渲染一个列表项 */}
      {/* ItemSeparatorComponent:列表项纸巾盒的分隔符(出现在列表项之间) */}
      {/* ListHeaderComponent:列表头组件(只出现在第一个列表项和之间) */}
      {/* ListFooterComponent:列表尾部组件(指出先最后一个列表项之后) */}
      {/* onEndReached:页面滚动到底部了 */}
      {/* onEndReachedThreshold: 滚动到底 事件触发需要的阈值 */}
      {/* onRefresh:在页面顶部触发了 下拉刷新事件 ,会在顶部添加 加载中 动画 */}
      {/* refreshing:当前师傅正在刷新中(本质是控制页面顶部的 刷新中 动画的显示与隐藏) => 如果使用onRefresh事件必须同时使用此属性 */}
      <FlatList
        data={products}
        renderItem={_renderItem}
        ItemSeparatorComponent={_ItemSeparatorComponent}
        ListHeaderComponent={_ListHeaderComponent}
        ListFooterComponent={_ListFooterComponent}
        onEndReached={_onEndReached}
        onEndReachedThreshold={0.2}
        onRefresh={_onRefresh}
        refreshing={isLoading}></FlatList>
    </View>
  );
}
